<template>
  <div>
    <div>
      <h1>练习1:</h1>
      <ul>
        <li v-for="val in arr" :key="val"><h1>{{ val }}</h1></li>
      </ul>
      <button @click="btn">走一走</button>
    </div>  

    <div>
      <h1>练习2:</h1>
      <ul>
        <li v-if="arr2.length > 0"></li>
        <li v-for='(val,idx) in arr2' :key="idx">{{ val }} <button @click="del(idx)">删除</button></li>
      </ul>
      <button @click="add">生成</button>
    </div>  
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['美食','睡觉','撸代码','打游戏'],
      arr2:[1,6,4]
    }
  },
  methods: {
    btn() {
      // console.log(this.arr.reverse());
      this.arr = this.arr.reverse()
    },
    add() {
      // 添加进数组
      this.arr2.push( Math.floor(Math.random()*20))
      // console.log(this.arr2);
    },
    del(index) {
      // 删除
      this.arr2.splice(index,1)
    }
  }
}
</script>

<style scoped>
  li {
    list-style: none;
    margin-bottom: 10px;
  }
  button {
    width: 100px;
    height: 40px;
    margin-left: 0px;
  }
</style>